<template>
    <div>
        <a-modal
         v-model:visible="visible" 
         :title="formState.id?formState.view?'查看':'编辑':'新增'" 
         @ok="handleOk" 
         @cancel="visible = false"
         class="enterprise-add-edit-modal"
         :width="700"
         :footer="null"
        >
            <div v-if="visible">
                <a-form :form="form" layout="horizontal" class="add-edit-form">
                    <a-form-item label="物料编号">
                        <a-input
                        v-model:value="formState.fwlbh"
                        placeholder="请输入物料编号"
                        v-decorator="[
                            'fwlbh', { initialValue:formState.fwlbh, rules: rules.fwlbh}
                        ]"/>
                    </a-form-item>
                    <a-form-item label="物料名称">
                        <a-input
                        v-model:value="formState.fwlmc"
                        placeholder="请输入物料名称"
                        v-decorator="[
                            'fwlmc', { initialValue:formState.fwlmc, rules: rules.fwlmc}
                        ]"/>
                    </a-form-item>
                    <a-form-item label="物料等级">
                        <a-input
                        v-model:value="formState.fwldj"
                        placeholder="请输入物料等级"
                        v-decorator="[
                            'fwldj', { initialValue:formState.fwldj, rules: rules.fwldj}
                        ]"/>
                    </a-form-item>
                    <a-form-item label="通用名称">
                        <a-input
                        v-model:value="formState.ftymc"
                        placeholder="请输入通用名称"
                        v-decorator="[
                            'ftymc', { initialValue:formState.ftymc, rules: rules.ftymc}
                        ]"/>
                    </a-form-item>
                    <a-form-item label="规格">
                        <a-input
                        v-model:value="formState.fgg"
                        placeholder="请输入规格"
                        v-decorator="[
                            'fgg', { initialValue:formState.fgg, rules: rules.fgg}
                        ]"/>
                    </a-form-item>

                    <a-form-item label="数量单位">
                        <a-select
                            ref="select"
                            placeholder="请选择数量单位"
                            v-model:value="formState.fsldw"
                            v-decorator="[
                                'fsldw', { initialValue:formState.fsldw, rules: rules.fsldw}
                            ]"
                            >
                            <a-select-option v-for="(item,index) in materialUnitList" :value="item.itemValue">{{ item.itemText }}</a-select-option>
                        </a-select>
                    </a-form-item>
                    
                    <a-form-item label="最小阈值">
                        <a-input-number
                        style="width: 185px;"
                        :min="0"
                        :precision="0"
                        v-model:value="formState.fzxyz"
                        placeholder="请输入最小阈值"
                        v-decorator="[
                            'fzxyz', { initialValue:formState.fzxyz, rules: rules.fzxyz}
                        ]"/>
                    </a-form-item>
                    
                    <!-- <a-form-item label="备注" class="flex-1-box">
                        <a-textarea 
                            placeholder="请输入备注"
                            v-model:value="formState.fbz"
                            :autosize="{ minRows: 3, maxRows: 10000 }"
                        ></a-textarea>
                    </a-form-item> -->
                </a-form>
            </div>
            <div style="
                display: flex; justify-content: flex-end;
                margin-top: 20px; width: 100%;
                background-color: #fff;">
                <a-button @click="visible = false">取消</a-button>
                <a-button v-if="!formState.view" style="margin: 0 20px;" class="blue-btn" type="primary" @click="handleOk(true)">保存</a-button>
                <a-button v-if="!formState.view" class="blue-btn" type="primary" @click="handleOk(false)">保存并关闭</a-button>
            </div>
        </a-modal>
    </div>
</template>
<script>
import compSelector from '@/components/compSelector/compSelector.vue'
import { ocalityPostAction } from '../service/index'
import moment from 'moment'
export default {
    components:{
        compSelector,
    },
    props:{

    },
    data(){
        return{
            visible:false,
            formState:{},
            form: this.$form.createForm(this, { name: 'coordinated' }),
            rules:{
                fgjry: [{
                    required: true,
                    message: '请输入物料编号',
                    trigger: 'blur',
                }],
                fwlbh: [{
                    required: true,
                    message: '请输入物料编号',
                    trigger: 'blur',
                }],
                fwlmc: [{
                    required: true,
                    message: '请输入物料名称',
                    trigger: 'blur',
                }],
                fwldj: [{
                    required: true,
                    message: '请输入物料等级',
                    trigger: 'blur',
                }],
                ftymc: [{
                    required: true,
                    message: '请输入通用名称',
                    trigger: 'blur',
                }],
                fgg: [{
                    required: true,
                    message: '请输入规格',
                    trigger: 'blur',
                }],
                fsldw: [{
                    required: true,
                    message: '请选择数量单位',
                    trigger: 'blur',
                }],
                fzxyz: [{
                    type:'number',
                    required: true,
                    message: '请输入最小阈值',
                    trigger: 'blur',
                }],
            },
            materialUnitList:[],
        }
    },
    watch:{

    },
    mounted(){
    },
    methods:{
        getData(val){
            this.formState = {}
            this.formState = val
            //console.log('是否再次获取',val)
            ocalityPostAction({dictName:'企业物料单位'}).then(res => {
                if(res.code == 200){
                    this.materialUnitList = res.result
                }
            })
        },
        handleOk(val){
            this.form.validateFields((err, values) => {
                if (!err) {
                    if(this.formState.id){
                        this.$emit('editItem',{...this.formState,...values},val)
                    }else{
                        this.$emit('addItem',{...this.formState,...values},val)
                    }
                    
                }
            })
        },
    }
}
</script>
<style lang="less">
.enterprise-add-edit-modal{
    .add-edit-form{
        display: flex;
        flex-wrap: wrap;
        .ant-form-item{
            display: flex;
        }
        .ant-form-item-label{
            width: 85px;
        }
        .ant-form-item-control-wrapper{
            width: 180px;
        }
        .flex-1-box{
            width: 100%;
            .ant-form-item-control-wrapper{
                flex: 1;
            }
        }
    }
}
</style>